{include file="public/header" /}
<body class="hide-top">
<div class="login-container">
    <img src="/static/index/img/icon37.png" alt="">
    <div class="login-content register-content">
        <p>您好，欢迎注册</p>
        <form action="{:url('register/save')}" method="post" class="form layui-form">
            <ul class="login-list">
                <li>
                    <p>手机号</p>
                    <div>
                        <input type="number" name="mobile" id="mobile" lay-verify="required" lay-reqtext="请输入手机号"
                               placeholder="请输入手机号" autocomplete="off">
                    </div>
                </li>
                <li>
                    <p>短信验证码</p>
                    <div>
                        <input type="text" name="captcha" lay-verify="required" lay-reqtext="请输入短信验证码"
                               placeholder="请输入短信验证码" autocomplete="off">
                        <p class="code code1">获取验证码</p>
                        <p class="code code2"></p>
                    </div>
                </li>
                <li>
                    <p>昵称</p>
                    <div>
                        <input type="text" name="nickname" lay-verify="required" lay-reqtext="请输入昵称"
                               placeholder="请输入昵称" autocomplete="off">
                    </div>
                </li>
                <li>
                    <p>登录密码</p>
                    <div>
                        <input type="password" name="password" lay-verify="required" lay-reqtext="请输入登录密码"
                               placeholder="请输入登录密码">
                    </div>
                </li>
                <li>
                    <p>支付密码</p>
                    <div>
                        <input type="password" name="pay_password" lay-verify="required" lay-reqtext="请输入支付密码"
                               placeholder="请输入支付密码">
                    </div>
                </li>
                <li>
                    <p>邀请码</p>
                    <div>
                        <input type="text" name="parent_code" lay-verify="required" lay-reqtext="请输入邀请码"
                               placeholder="请输入邀请码" autocomplete="off" {if $Request.get.code}readonly value="{$Request.get.code}"{/if}>
                    </div>
                </li>
            </ul>
            <p class="register-agr">
                <input type="checkbox" name="agree" lay-skin="primary" value="1" checked>我已阅读并同意
                <a style="color: var(--bc);" href="{:url('index/communal')}?type=register_msg" class="toggle">《注册协议》</a>
                和
                <a style="color: var(--bc);" href="{:url('index/communal')}?type=privacy_msg" class="toggle">《隐私协议》</a>
            </p>
            <p class="save" lay-submit lay-filter="save" formObj=".form">立即注册</p>
        </form>
        <p class="flex-center login-number">已有账号？<a href="{:url('login/index')}">立即登录</a></p>
    </div>
</div>
</body>
{include file="public/footer" /}
<script>
    $(function () {
        var os = true;
        var time = 60;
        $('.code2').hide();
        $('.code1').click(function () {
            var mobile = $('#mobile').val();
            if (!mobile) {
                layer.msg('请输入手机号');
                return false;
            }
            if (os !== true) return false;
            os = false;
            layer.load(2);
            $.ajax({
                type: "POST",
                url: "{:url('userCode/sendSms')}",
                data: {mobile: mobile, action: 'register'},
                success: function (data) {
                    layer.closeAll();
                    if (data.code === 1) {
                        layer.msg(data.msg, {time: 1500}, function () {
                            $('.code2').html(time + 's');
                            time--;
                            $('.code1').hide().siblings('.code2').show();
                            let isTime = setInterval(() => {
                                if (time == 0) {
                                    clearInterval(isTime);
                                    time = 60;
                                    $('.code2').hide().siblings('.code1').show();
                                    os = true;
                                }
                                $('.code2').html(time-- + 's')
                            }, 1000);
                        });
                    } else {
                        os = true;
                        layer.msg(data.msg);
                    }
                }
            });
        });
    });
</script>
</html>